<template>
  <div>
    <div class="app-root">
        <HeadCompoent></HeadCompoent>
      <div class="page-order-confirm">
        <a>
          <div class="user-address">
            <div class="no-info" v-if="receiptlist[0].name==''">选择收货地址</div>

            <div class="info" v-if="receiptlist[0].name!=''">
              <div class="username">收货人: {{receiptlist[0].name}}</div>
              <div class="phone">{{receiptlist[0].tel}}</div>
              <div class="address">收货地址: {{receiptlist[0].address}}</div>
            </div>

            <span class="location-icon icon-location"
              ><img src="../../public/assets/images/dw.png" alt=""
            /></span>
            <span class="go-icon icon-right-open" @click="Jump_Ress">
              <img src="../../public/assets/images/yjt.png" alt=""
            /></span>
          </div>
        </a>
        <div class="items">
          <div class="item" v-for="item in paymentlist" :key="item.id+item.size+item.color">
            <div class="content">
              <img
                class="picture"
                :src="item.imgurl"
                
              />
              <div class="info">
                <div class="title tieles">{{item.name}}</div>
                <div class="sku">{{item.color}}  {{item.size}}</div>
                <div class="price">{{item.coupon_price}}</div>
                <div class="account">x{{item.num}}</div>
              </div>
            </div>
            <hr class="comp-sep" style="margin-left: 12px" />
          </div>

          <div class="subtotal">
            <span class="amount">小计: ¥{{nums1}}</span>
          </div>

          <div class="cell">
            <span class="cell-left">运费险:</span
            ><span class="cell-right">免费赠送</span>
          </div>
          <!-- 优惠券 -->

          <!-- 优惠券单元格 -->
          <van-coupon-cell
            :coupons="coupons"
            
            :chosen-coupon="chosenCoupon"
            @click="showList = true"
          />
          <!-- 优惠券列表 -->
          <van-popup
            v-model="showList"
            round
            position="bottom"
            style="height: 90%; padding-top: 4px"
          >
            <van-coupon-list
              :coupons="coupons"
              :chosen-coupon="chosenCoupon"
              :disabled-coupons="disabledCoupons"
              @change="onChange"
              @exchange="onexchange"
            />
          </van-popup>
     <!-- 支付方式 -->



          <div class="pay-method">
            <div class="title">支付方式</div>
            <van-radio-group v-model="radio">
            <div class="option">
              <img
                class="fenqi-icon"
                src="../../public/assets/images/zfb.png"/>&nbsp;支付宝<span
                class="btn icon-ok-circled-2 choosen"
              ><van-radio name="1">单选框 1</van-radio></span>
            </div>
            <div class="option">
              <img
                class="fenqi-icon"
                src="../../public/assets/images/hb1.png"/>&nbsp;花呗<span
                class="btn icon-circle"
              ><van-radio name="2">单选框 2</van-radio></span>
            </div>
            <div class="option">
              <img
                class="fenqi-icon"
                src="../../public/assets/images/hb.png"/>
              &nbsp;花呗分期<span class="btn icon-circle"><van-radio name="3">单选框 3</van-radio></span>
            </div>
            <div class="option">
              <img
                class="fenqi-icon"
                src="../../public/assets/images/wx.png"/>&nbsp;微信支付<span
                class="btn icon-circle"
              ><van-radio name="4">单选框 4</van-radio></span>
            </div>
            </van-radio-group>
          </div>
          <!-- 底部 -->
          <div class="toolbar">
          <div class="total">
            <van-submit-bar :price="nums2" button-text="支付" @submit="onSubmit" />
          </div>
          </div>
          <!-- 支付弹出层 -->
<van-dialog v-model="show1" title="是否支付" show-cancel-button @confirm="onconfirm" @cancel="oncancel">
</van-dialog>


        </div>
      </div>
    </div>
  </div>
</template>
<script>
import HeadCompoent from '../components/HeadCompoent.vue'
export default {
    components:{
        HeadCompoent
    },
    props:['paymentlist'],
  data() {
  
    return {
      show1:false,
      showList: false,
      chosenCoupon: -1,
      jnum:0,//优惠券减去的价格
      coupons: [],//可用优惠券
      disabledCoupons: [],//不可用优惠券
      radio:"0",
      shlist:{},//收货数组
      receiptlist:[{
        name:'',
        tel:'',
        address:''
      }]
    };
  },
  methods: {
    Jump_Ress(){
        this.$router.push({name:'ress'})
    },
    //切换优惠券
    onChange(index) {
      this.showList = false;
      this.chosenCoupon = index;
      console.log(index);
      if(index!=-1){
this.jnum=this.coupons[index].value/100
      }
      
    },
    onexchange(){
this.$toast('暂未开放')
    },
    //提交
    onSubmit(){
if(this.radio==0||this.receiptlist[0].name==''){
  this.$toast('请选择支付方式或填写地址')
  return
}
this.show1=true
    },
    // 确认
    onconfirm(){
      console.log(1);
      
      this.shlist={
        zt:1,
      list:this.paymentlist,
      date:new Date(),
      nums:this.nums2/100
      }
console.log(this.shlist.list[0].ztm);
       if(this.shlist.list[0].ztm==1){
        console.log('这个是购物车传的');
         console.log(this.shlist.list);

  let shoppinglist = window.localStorage.getItem("shoppinglist");
          shoppinglist = JSON.parse(shoppinglist);

this.shlist.list.forEach(ele=>{
shoppinglist   =  shoppinglist.filter(item=>{
  return     !(item.id==ele.id&&item.color==ele.color&&item.size==ele.size)
})
})
shoppinglist = JSON.stringify(shoppinglist);
      window.localStorage.setItem("shoppinglist", shoppinglist);





      }
   let myorderlist = window.localStorage.getItem("myorderlist");
          myorderlist = JSON.parse(myorderlist);
        myorderlist.push(this.shlist)
         myorderlist = JSON.stringify(myorderlist);
      window.localStorage.setItem("myorderlist", myorderlist);
this.$router.push({name:'my'})
    
    },
    //取消
    oncancel(){
      console.log(2);
       this.shlist={
        zt:2,
      list:this.paymentlist,
      date:new Date(),
      nums:this.nums2/100
      };

      if(this.shlist.list[0].ztm==1){
        console.log('这个是购物车传的');
        console.log(this.shlist.list);

let shoppinglist = window.localStorage.getItem("shoppinglist");
          shoppinglist = JSON.parse(shoppinglist);
this.shlist.list.forEach(ele=>{
shoppinglist   =  shoppinglist.filter(item=>{
  return     !(item.id==ele.id&&item.color==ele.color&&item.size==ele.size)
})
})
 
shoppinglist = JSON.stringify(shoppinglist);
      window.localStorage.setItem("shoppinglist", shoppinglist);
      }

      // console.log(this.shlist.list[0].ztm);
       let myorderlist = window.localStorage.getItem("myorderlist");
          myorderlist = JSON.parse(myorderlist);
        myorderlist.push(this.shlist)
         myorderlist = JSON.stringify(myorderlist);
      window.localStorage.setItem("myorderlist", myorderlist);
      this.$router.push({name:'my'})
    }
  },
created(){
//总优惠券
 let Securitieslist = window.localStorage.getItem("Securitieslist");
  console.log('100',Securitieslist);
          Securitieslist = JSON.parse(Securitieslist);
          console.log('145',Securitieslist);
          // console.log(this.nums1);
          //判断优惠券是否可用
          Securitieslist.forEach(item => {
            if(item.value/10<=this.nums1){
               this.coupons.push(item)
            }else{
              this.disabledCoupons.push(item)
            }
          });
          //收货订单存储
          if (window.localStorage.getItem("myorderlist") == null) {
      window.localStorage.setItem("myorderlist", "[]");
    }
          
},
  mounted(){
    if (window.localStorage.getItem("Receiptlist") == null) {
      window.localStorage.setItem("Receiptlist", "[]");
    }
    let Receiptlist = window.localStorage.getItem("Receiptlist");
    Receiptlist = JSON.parse(Receiptlist);
    if(Receiptlist.length==0){
      return
    }else{
 this.receiptlist=Receiptlist
    }
    console.log(this.receiptlist);
   
  },
  computed:{
    //小计计算
      nums1(){
        let s= this.paymentlist.reduce((total,item)=>{
      if(item.checked){
        return total += item.coupon_price * item.num;
      }else{
        return total
      }
    },0)
    return s.toFixed(2)
      },
      nums2(){
        let s= this.paymentlist.reduce((total,item)=>{
      if(item.checked){
        return total += item.coupon_price * item.num;
      }else{
        return total
      }
    },0)
    return (s-this.jnum)*100
      }
  },

};

</script>
<style scoped>
.app-root {
  background-color: rgb(245, 245, 245);
}
.page-order-confirm {
  margin-bottom: 59px;
  margin-top: 50px;
}
a {
  text-decoration: none;
}

a,
body {
  color: #595c61;
}
.page-order-confirm .user-address {
  position: relative;
  margin-bottom: 10px;
  background-color: #fff;
}
.page-order-confirm .user-address .no-info {
  height: 88px;
  padding: 0 44px;
  overflow: hidden;
  line-height: 88px;
  font-size: 20px;
  color: #595c61;
}
.page-order-confirm .user-address .go-icon,
.page-order-confirm .user-address .location-icon {
  position: absolute;
  top: 29px;
  width: 44px;
  height: 30px;
  color: #595c61;
  text-align: center;
  font-size: 22px;
}

element.style {
}
.page-order-confirm .user-address .go-icon {
  right: 0;
}
.page-order-confirm .user-address::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  pointer-events: none;
  width: 100%;
  height: 2px;
  background: repeating-linear-gradient(
    110deg,
    transparent,
    transparent 5px,
    #fd9386 0,
    #fd9386 13px,
    transparent 0,
    transparent 18px,
    #7b90df 0,
    #7b90df 26px
  );
}
.location-icon img,
.go-icon img {
  margin-top: 3px;
  width: 22px;
  height: 22px;
}
.page-order-confirm .user-address .info {
  min-height: 88px;
  padding: 0 44px;
  overflow: hidden;
}
.page-order-confirm .user-address .info .username {
  margin-top: 8px;
  height: 32px;
  line-height: 32px;
  font-size: 14px;
  color: #595c61;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.page-order-confirm .user-address .info .phone {
  position: absolute;
  right: 44px;
  top: 8px;
  height: 32px;
  line-height: 32px;
  font-size: 14px;
  color: #595c61;
}
.page-order-confirm .user-address .info .address {
  padding-top: 4px;
  padding-bottom: 10px;
  font-size: 14px;
  color: #595c61;
  display: -webkit-box;
  overflow: hidden;
  word-break: break-all;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.page-order-confirm .item {
  font-size: 0;
  background-color: #fff;
}
.page-order-confirm .item .content {
  box-sizing: border-box;
  padding: 12px;
  width: 100%;
  height: 124px;
}
.page-order-confirm .item .content .picture {
  display: inline-block;
  width: 100px;
  height: 100px;
}
img {
  pointer-events: none;
}
.page-order-confirm .item .content .info {
  display: inline-block;
  position: relative;
  width: calc(100% - 111px);
  height: 100px;
  margin-left: 11px;
  vertical-align: top;
}

.item .content .info .sku,
.item .content .info .title {
  display: -webkit-box;
  overflow: hidden;
  word-break: break-all;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}


 .item .content .info .title {
    font-size: 12px;
    color: #595c61;
}
.page-order-confirm .item .content .info .sku {
  font-size: 12px;
  color: #a9acb3;
  margin-top: 3px;
}
.page-order-confirm .item .content .info .price {
  position: absolute;
  bottom: 0;
  left: 0;
  color: #000c18;
  font-size: 16px;
  line-height: 24px;
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.page-order-confirm .item .content .info .account {
  position: absolute;
  right: 0;
  bottom: 0;
  font-size: 14px;
  color: #000c18;
}
.comp-sep {
  border: solid #e5e5e5 1px;

  position: relative;
}
.page-order-confirm .subtotal {
  height: 44px;
  background-color: #fff;
  margin-bottom: 10px;
  padding: 0 12px;
  text-align: right;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  flex-direction: column;
}
.page-order-confirm .subtotal .amount {
  color: #000c18;
  font-size: 14px;
  display: block;
}
.page-order-confirm .cell {
  position: relative;
  background-color: #fff;
  height: 44px;
  line-height: 44px;
  margin-bottom: 10px;
}
.page-order-confirm .cell .cell-left {
  font-size: 14px;
  margin-left: 12px;
}
.page-order-confirm .cell .cell-right {
  position: absolute;
  right: 12px;
  top: 0;
  font-size: 13px;
  color: #000c18;
}

 .pay-method {
    background-color: #fff;
    width: 100%;
    margin-top: 12px;
    border-radius: 2px;
    padding-bottom: 60px;
}
.pay-method .title {
    font-size: 16px;
    line-height: 44px;
    color: #000c18;
    padding: 0 12px;
}
.pay-method .option {
    font-size: 15px;
    color: #595c61;
    line-height: 44px;
    padding: 0 12px;
}
 .option .fenqi-icon {
    width: 22px;
    margin: 0 3px;
    vertical-align: middle;
}
.btn.choosen, .btn.choosen {
    color: #5a75d6;
}

.option .btn {
    float: right;
    color: #a9acb3;
    width: 21px;
    height: 24px;
    margin-top: -15px;
}
.page-order-confirm .toolbar .total {
    font-size: 16px;
    color: #000c18;
    line-height: 49px;
    /* height: 49px; */
    margin-left: 12px;
}
.page-order-confirm .toolbar::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    width: 100%;
    height: 100%;
    border: solid #e5e5e5;
    border-width: 0.5px 0 0;
}
.tieles{
  margin-top: 5px;
}
.van-cell__value span{
  color: red;
}
</style>